<template>
  <div>
    <div class="node" v-has="{action: 'subsidy:push:set:list', effect: 'move'}">
    <div :class="[$style.search_box, $style.topSelect]">
      <div :class="$style.selectBox">
        <label>站点：</label>
        <el-select
        filterable
          style="width:160px"
          v-model="searchs.siteId"
          clearable
          @change="pageChange(1)"
          placeholder="请选择"
        >
          <el-option  v-for="item of brandList"
            :key="item.id"
            :value="item.id"
            :label="item.name"></el-option>
        </el-select>
      </div>
      <div :class="$style.searchBox1" style="margin-left: 20px">
        <el-button type="primary" icon="el-icon-search" @click="getRate">查询</el-button>       
      </div>
    </div>
    <Panel title="市政补贴推送配置" :intro="intro">
      <div slot='ext' :class="$style.examine">
         <!-- <el-button v-has="{action: 'ce:limit:add', effect: 'move'}" type="success" icon="el-icon-plus" @click="()=>editStore()">新增</el-button> -->
    </div>
    <TableEncapsulation
      slot="body"
      :tableConfig="tableConfig"
      :tableData="tableData"
    >
    <template slot="operation" slot-scope="operation">
          <el-button
            v-has="{action: 'subsidy:push:set:info', effect: 'move'}"
            type="text"
            @click="()=>editStore(operation.row)"
          >编辑</el-button>
          <!-- <el-button
            v-has="{action: 'ce:limit:delete', effect: 'move'}"
            type="text"
            @click="()=>remove(operation.row.siteId)"
          >删除</el-button> -->
        </template>
        <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChange"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
    </TableEncapsulation>
    </Panel>
    <!-- 添加编辑 start-->
    <ModalPanel 
      :visible='visible'
      title="编辑"
      :onCancel="onCancel"
      :class="$style.bannerDialog"
      :onOk="onSubmit">
      <div>
        <ModifyForm
          :hiddenBtn='true'
          :editColumn='editColumn'
          :updateData="updateData"
          labelWidth='100px'
          ref="configModal"
          :class="$style.ModifyForm"
          :temporaryData='modalData'>
        </ModifyForm>
      </div>
    </ModalPanel>
    <!-- 添加编辑end -->
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'subsidy:push:set:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import { objectFilter } from "@/tools/array.js";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
export default {
  name: "iotConfine",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
    ModifyForm,
    ModalPanel
  },
  data() {
    return {
      intro:{
        title:'市政补贴推送配置',
        content: ``
      },
      searchs:{
        component: 'goverConfig',
        name:'',
        siteId:"",
        rateGroupId:'',
      },
      tableData: [],
       pager: {
        component: 'goverConfig',
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      rateList: [{id:'',name:'请选择'}],
      operation: true,
      brandList:[{id:'',name:'请选择'}],
      //添加编辑
      edit: false,
      visible:false,
      modalData:{},
      editColumn: [
        // {
        //   name: "站点",
        //   prop: "siteId",
        //   type: "select",
        //   optionBindLabel: 'name',
        //   optionBindValue: 'id',
        //   optionList: [{'id':'','name':'请选择站点'}],
        //   onChange: () => {},
        //   required:true,
        //   width:24
        // },
        {
          name: "推送百分比",
          prop: "ratio",
          type: "number",
          required:true,
          desc: '推送百分比 0-1 如:30%=0.3 ',
          width:24,
          min: 0,
          max: 1
        },
      ],
      //添加编辑end
    };
  },
  mounted() {
    // this.searchsFnc()
    this.getRate()
    this.iotSite()
    this.rate()
  },
  computed: {
    tableConfig () {
      return {
        selection: true,
        columnConfig: [
          {
            label: "站点",
            type: "text",
            prop: "siteName",
            align: "center"
          },
          {
            label: "推送百分比",
            type: "text",
            prop: "ratio",
            align: "center"
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:180
          }
        ].filter(Boolean)
        }
    }
  },
  methods: {
    //  searchsFnc (){
    //   let searchs = this.$store.getters.searchs
    //   if(searchs &&searchs.component == 'rate'){
    //     this.searchs = searchs
    //   }
    //   let pager = this.$store.getters.pager
    //   if(pager &&pager.component == 'rate'){
    //     this.pager = pager
    //   }
    // },
    async getRate() {
      let rateGroupId = this.searchs.rateGroupId, page = this.pager.current, siteId = this.searchs.siteId
      let seach = objectFilter({ page, siteId})
      const res = await request({
        url: "/subsidy/set/list",
        method: "POST",
        data: seach
      });
      this.tableData = res.page.list
      this.pager.total = res.page.totalCount
      this.pager.current = res.page.currPage
      
    },
    pageChange(val) {
      this.pager.current = val;
      this.getRate();
    },
    changeSearch(key, val) {
      this[key] = val;
      this.pager.current = 1;
    },
    //添加编辑start
    editStore(rowData){
      if(rowData){
        this.modalData = {...rowData}
        this.edit = true
      }else{
        this.edit = false
        this.modalData ={}
      }
      this.visible = true
    },
    async onSubmit(){
      this.$refs['configModal'].onSubmit()
    },
    onCancel(){
      this.visible = false
    },
    async updateData(values){
      let url, msg
      let  siteId = this.modalData.siteId
      const {  ratio } = values
      url = '/subsidy/set/update/site'
      msg = '编辑成功'
      let res = await request({
        url: url,
        method: "POST",
        data: { siteId, ratio }
      });
     if(res.code !==0) return
      this.$message.success(msg)
      this.visible = false
      this.getRate();
    },
    //添加编辑end
    //获取站点
    async iotSite(){
      let { list } = await request({
      url: "/iot/site/select",
      method: "POST",
      data: {}
      });
      this.brandList = list
      this.editColumn[0].optionList = list
    },
    async rate(){
      let { list } = await request({
      url: "/grate/group/all",
      method: "POST",
      data: {}
      });
      this.rateList =list
    },
  }
}
</script>
<style lang='scss' module>
.examine{
    display: flex;
    align-items: center;
    :global{
        div{
            color: #fff;
            padding: 10px;
            margin: 0 10px;
            border-radius: 2px;
            font-size: 14px;
            cursor: pointer;
            min-width: 60px;
            text-align: center;
        }
        .adopt{
                background: #409EFF;
        }
    }
}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  :global {
    .el-input {
      width: 150px;
    }
    .el-select {
      .el-input {
        width: 90px;
      }
    }
    .el-input__icon {
      line-height: 27px;
    }
    .el-range-separator{
      line-height: 26px;
    }
  }
}

.topSelect {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}
</style>